<template>
  <div class="container">
    <view class="list">
      <view class="item" v-for="(item, index) in list" :key="index" @click="toDetails(item.id)">
        <view class="item-title fz14 bold">收货人：{{ item.realName }} {{item.phone}}</view>
        <view class="item-text fz14">收货地址：{{item.address}}{{item.city}}{{item.district}}{{item.detail}}</view>
        <uv-divider text=""></uv-divider>
        <view class="flex alignCenter justifyBetween">
          <view class="flex alignCenter fz14" @click.stop="setDe(item.id)">
            <view class="check">
              <view class="ye" v-if="item.isDefault">
                <uv-icon size="20" name="checkmark-circle-fill" color="#E93323"></uv-icon>
              </view>
              <view class="no" v-else></view>
            </view>
            <view>设为默认</view>
          </view>
          <view class="flex alignCenter fz14">
            <view class="flex alignCenter">
              <uv-icon name="edit-pen" size="20"></uv-icon>
              编辑
            </view>
            <view class="flex alignCenter" style="margin-left: 15px;" @click.stop="delFunc(item.id,index)">
              <uv-icon name="trash" size="20"></uv-icon>
              删除
            </view>
          </view>
        </view>
      </view>
    </view>

    <uv-empty mode="address" v-if="!list.length"></uv-empty>
    <view class="actionBtn" @click="proxy.$utils.toLink('/packagePages/shoppingMall/updateAddress')">
      <uv-button text="添加新地址" shape="circle" color="#E93323"></uv-button>
    </view>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const instance = getCurrentInstance();

let params = {
  page: 1,
  limit: 20,
};
let totalPage = ref(0);
let list = ref([]);

onLoad((e) => {
  uni.setNavigationBarTitle({
    title: e.name,
  });
  getInfo();
});

onShow(() => {
  if (counter.dataRefresh) init();
});

onReachBottom(() => {
  getMore();
});

function toDetails(id) {
  proxy.$utils.toLink(`/packagePages/shoppingMall/updateAddress?id=${id}`);
}

async function setDe(id) {
  await proxy.$shopApis.addressSetDefault({ id });
  proxy.$utils.showToast("设置成功");
  getInfo();
}

function init() {
  params.page = 1;
  list.value = [];
  counter.dataRefresh = false;
  getInfo();
}

function getMore() {
  if (params.page >= totalPage) return;
  params.page++;
  getInfo();
}

async function delFunc(id, index) {
  let resp = await proxy.$utils.showModal({
    content: "确认删除?",
  });
  if (!resp) return;
  await proxy.$shopApis.addressDel({ id });
  proxy.$utils.showToast("删除成功");
  list.value.splice(index, 1);
}

async function getInfo() {
  let resp = await proxy.$shopApis.addressList(params);
  let arr = [...list.value];
  if (resp.list.length) {
    arr = proxy.$utils.filterArr(arr, resp.list, "id");
  }
  list.value = arr;
  totalPage = resp.totalPage;
  console.log("地址", resp);
}
</script>


<style lang="scss">
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.container {
  padding: 15px 15px 85px 15px;
  .no {
    width: 18px;
    height: 18px;
    border: 1px solid #d4d4d4;
    border-radius: 50%;
    margin-right: 5px;
  }
  .ye {
    margin-right: 5px;
  }
  .item {
    border-radius: 10px;
    background-color: white;
    margin-bottom: 15px;
    padding: 15px;
    .item-title {
      margin-bottom: 5px;
    }
  }
  .actionBtn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px 15px 25px 15px;
  }
}
</style>